<template>
  <el-card class="register-container">
    <h2>用户注册</h2>
    <form @submit.prevent="handleSubmit">
      <!-- 用户名 -->
      <div class="form-group">
        <label>用户名：</label>
        <input
          v-model="formData.userName"
          type="text"
          required
          maxlength="255"
          placeholder="请输入用户名"
        />
      </div>

      <!-- 账号 -->
      <div class="form-group">
        <label>登录账号：</label>
        <input
          v-model="formData.userAccount"
          type="text"
          required
          maxlength="255"
          placeholder="请输入账号"
        />
      </div>

      <!-- 密码 -->
      <div class="form-group">
        <label>密码：</label>
        <input
          v-model="formData.userPassword"
          type="password"
          required
          minlength="6"
          placeholder="至少6位密码"
          show-password
        />
      </div>

      <!-- 确认密码 -->
      <div class="form-group">
        <label>确认密码：</label>
        <input
          v-model="confirmPassword"
          type="password"
          required
          placeholder="请再次输入密码"
          show-password
        />
        <div v-if="passwordMismatch" class="error-msg">密码不一致</div>
      </div>

      <!-- 用户编号 -->
      <div class="form-group">
        <label>用户编号：</label>
        <input
          v-model="formData.userNumber"
          type="text"
          required
          placeholder="请输入学号/工号"
        />
      </div>

      <button type="submit" :disabled="submitting">
        {{ submitting ? "注册中..." : "立即注册" }}
      </button>
    </form>
    <el-button
      type="text"
      style="background-color: transparent; color: #007bff"
      @click="handleLoginLogin"
      >已有账号？去登录</el-button
    >
  </el-card>
</template>
  
  <script setup>
import { ref, computed } from "vue";
import apiClient from "@/axios"; // 引入配置好的 axios 实例
import router from "@/router";
import Swal from "sweetalert2";
const formData = ref({
  // userName: '',
  // userAccount: '',
  // userPassword: '',
  // userNumber: ''
  userName: "李四",
  userAccount: "lisi",
  userPassword: "123456",
  userNumber: "21101020429",
});

const confirmPassword = ref("");
const submitting = ref(false);

// 密码一致性验证
const passwordMismatch = computed(() => {
  return (
    formData.value.password &&
    confirmPassword.value &&
    formData.value.password !== confirmPassword.value
  );
});

const handleSubmit = async () => {
  if (passwordMismatch.value) return;

  try {
    submitting.value = true;
    const response = await apiClient.post("/auth/register", {
      ...formData.value,
    });
    if (response.data.code === 200) {
      Swal.fire({
        title: "注册成功!",
        text: "即将跳转到登录页...",
        icon: "success",
        timer: 2000, // 2秒后自动关闭
        showConfirmButton: false,
      }).then(() => {
        router.push({ name: "Login" });
      });
      // router.push({ name: "Login" });
    } else {
      Swal.fire({
        title: "注册失败!",
        text: response.data.message,
        icon: "error",
      });
    }
  } catch (error) {
    console.error("注册失败:", error);
    console.log(response.data.message);
    alert(`注册失败: ${error.response?.data?.message || "服务器错误"}`);
  } finally {
    submitting.value = false;
  }
};

const handleLoginLogin = () => {
  router.push({ name: "Login" });
};
</script>
  
  <style scoped>
.register-container {
  max-width: 500px;
  margin: 2rem auto;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #6c757d;
}

.error-msg {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.hint {
  color: #6c757d;
  font-size: 0.875rem;
}
</style>

<style>
.auto-alert {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 25px;
  background: #4caf50;
  color: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  animation: slideIn 0.5s, fadeOut 0.5s 2.5s;
  animation-fill-mode: forwards;
  z-index: 9999;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>